<template>
  <div class="touchSwiper" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" ref="touchSwiper_ref">
    <div class="swiper-main">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      x: 0,
      touchM: 0,
      flag: false,
      el:null,
      index:0,
      i:0
    };
  },
  components: {},
  mounted () {
      this.getEl()
      this.$emit('indicatorStyle',this.i)
  },
  methods: {
    getEl(){
        this.el=this.$refs.touchSwiper_ref
    },
    touchStart(e) {
      this.x = e.targetTouches[0].pageX
    },
    touchMove(e) {
      this.touchM = e.targetTouches[0].pageX - this.x;
      this.index=e.target.parentNode.getAttribute('index')
      if(this.touchM<0&&this.index==0||this.touchM>0&&this.index==1)
      {
        this.el.style.transform='translate('+(-this.index*this.el.offsetWidth+this.touchM)+'px)'
      }
      this.flag = true
    },
    touchEnd(e) {
      if (this.flag) {
          if(Math.abs(this.touchM)>230){
              if(this.touchM<0){
                  this.el.style.transition='all .5s'
                  this.el.style.transform='translate('+(-this.el.offsetWidth)+'px)'
                  this.i=1
              }else{
                this.el.style.transition='all .5s'
                this.el.style.transform='translate(0px)'
                this.i=0
              }
          }else{
            if(this.touchM<0&&this.index==0){
              this.el.style.transition='all .5s'
              this.el.style.transform='translate(0px)'
            }
            else if(this.touchM>0&&this.index==1){
              this.el.style.transition='all .5s'
              this.el.style.transform='translate('+(-this.el.offsetWidth)+'px)'
            }
          }
      }
      this.$emit('indicatorStyle',this.i)
      this.flag=false
    },
  },
};
</script>

<style scoped lang='less'>
.touchSwiper {
  width: 100%;
  height: calc(100% - 25px);
  .swiper-main {
    display: flex;
    width: 200%;
    height: 100%;
    overflow-y: hidden;
  }
}
</style>
